<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <!--<div class="action-cell">-->
        <!--<div class="search-block">-->
        <!--<Input v-model="value" class="input-search" placeholder="根据时间查询" style="width: 200px"></Input>-->
        <!--<Input v-model="value" class="input-search" placeholder="根据编队查找" style="width: 200px"></Input>-->
        <!--<Input v-model="value" class="input-search" placeholder="根据时间查找" style="width: 200px"></Input>-->
        <!--<Input v-model="value" class="input-search" placeholder="根据证件号查找" style="width: 200px"></Input>-->
        <!--<Button type="ghost" icon="ios-search">搜索</Button>-->
        <!--</div>-->
        <!--<Button type="error" @click="jumpPage('','UserAdd')">添加</Button>-->
        <!--</div>-->
        <div class="action-cell">
            <div class="list-action-btn">
                <Button type="error" size="large" @click="addIsShow =true">添加区域</Button>
            </div>

        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <div class="list-action-btn">
            <Button type="primary" size="large" style="margin-top: 20px" @click="jumpPage('','RegionList')">返回</Button>
        </div>
        <!--添加-->
        <Modal v-model="addIsShow" title="添加" @on-ok="handleSubmitAdd('formValidate')"
               @on-cancel="addIsShow =false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Form-item label="区域名称" prop="Title">
                    <i-input v-model="formValidate.Title" placeholder="请输入区域名称"></i-input>
                </Form-item>
                <Form-item label="区域地理描述" prop="GIS">
                    <i-input v-model="formValidate.GIS" placeholder="请输入区域地理描述"></i-input>
                </Form-item>
                <Form-item label="区域描述" prop="Text">
                    <i-input v-model="formValidate.Text" placeholder="请输入区域描述"></i-input>
                </Form-item>
                <!--<Form-item label="上级区域" prop="Text">-->
                    <!--<i-select v-model="formValidate.Principalid" placeholder="请选择上级区域">-->
                        <!--<template v-for="(item,index) in chooseAreaArr">-->
                            <!--<i-option :value="item.Id">{{item.Title}}</i-option>-->
                        <!--</template>-->
                    <!--</i-select>-->
                <!--</Form-item>-->
            </Form>
        </Modal>
        <!--编辑-->
        <Modal v-model="addIsShow2" title="编辑" @on-ok="handleSubmitEdit('formValidate')"
               @on-cancel="addIsShow2 =false">
            <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate" :label-width="100">
                <Form-item label="区域名称" prop="Title">
                    <i-input v-model="formValidate2.Title" placeholder="请输入区域名称"></i-input>
                </Form-item>
                <Form-item label="区域地理描述" prop="GIS">
                    <i-input v-model="formValidate2.GIS" placeholder="请输入区域地理描述"></i-input>
                </Form-item>
                <Form-item label="区域描述" prop="Text">
                    <i-input v-model="formValidate2.Text" placeholder="请输入区域描述"></i-input>
                </Form-item>
                <!--<Form-item label="上级区域" prop="Text">-->
                    <!--<i-select v-model="formValidate2.Principalid" placeholder="请选择审核状态">-->
                        <!--<template v-for="(item,index) in chooseAreaArr">-->
                            <!--<i-option :value="item.Id">{{item.Title}}</i-option>-->
                        <!--</template>-->
                    <!--</i-select>-->
                <!--</Form-item>-->
            </Form>
        </Modal>
        <!--<div style="margin: 10px;overflow: hidden">-->
            <!--<div style="float: right;">-->
                <!--<Page :total="total" size="large" show-total :current="current" show-elevator show-sizer-->
                      <!--@on-change="changePage"></Page>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                //添加
                formValidate: {
                    //添加字段
                    Title: '',
                    GIS: '',
                    Text: '',
                    Principalid: '无',
                },
                chooseAreaArr: [],
                addIsShow: false,
                //编辑
                formValidate2: {
                    //添加字段
                    Title: '',
                    GIS: '',
                    Text: '',
                    Principalid: '',
                },
                addIsShow2: false,
                //
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        title: '区域名称',
                        key: 'Title',
                        align: 'center',
                    },
                    {
                        title: '上级区域名称',
                        key: 'ParentTitle',
                        align: 'center',
                    },
                    {
                        title: '区域地理描述',
                        key: 'Gis',
                        align: 'center',
                    },
                    {
                        title: '区域描述',
                        key: 'Intro',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {

                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row)
                                            }
                                        }
                                    }, '删除'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.editClick(params.row)
                                            }
                                        }
                                    }, '编辑'),
                                ]
                            )

                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.getGetAreasData();
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {
                    parentId:that.$route.query.id,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetSubAreas, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;
                });

            },
            remove(row) {
                let that = this;
                this.$Modal.confirm({
                    title: '删除',
                    content: `是否对该区域信息`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                           id:row.Id
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DelArea, params, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },
            //点击编辑
            editClick:function(row){

                this.addIsShow2 = true;
                this.formValidate2.Title =row.Title;
                this.formValidate2.GIS =row.Gis;
                this.formValidate2.Text =row.Intro;
                // this.formValidate2.Text =row.Intro;
            },
            //获取第一区域列表
            getGetAreasData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetAreas, para, function (res) {
                    that.$Loading.finish();
                    let obj = {
                        'Title': '无',
                        'Id': '空'
                    };
                    that.chooseAreaArr = res.Msg;
                    that.chooseAreaArr.splice(0, 0, obj);
                    console.log('chooseAreaArr:', that.chooseAreaArr)
                });
            },
            handleSubmitAdd(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPSAdd(model);
                })
            },
            comfirmModifyPSAdd: function (model) {
                let that = this;
                let params ={
                    'Title':model.Title,
                    'GIS':model.GIS,
                    'Intro':model.Text,
                    'Principalid':that.$route.query.id,
                };
                console.log('model:',model);
                params = that.$qs.stringify(params);
                console.log('params:',params);
                apiUtil.post(that, apiUtil.urls.AddArea, params, function (res) {
                    that.$Message.info('添加成功 ');
                    that.mockTableData();
                });
            },
            handleSubmitEdit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPSEdit(model);
                })
            },
            comfirmModifyPSEdit: function (model) {
                let that = this;
                let params ={
                    'Title':model.Title,
                    'GIS':model.GIS,
                    'Intro':model.Text,
                    'Principalid':that.$route.query.id,
                }
                params = that.$qs.stringify(params);
                console.log('params:',params);
                apiUtil.post(that, apiUtil.urls.EditArea, params, function (res) {
                    that.$Message.info('修改成功 ')
                });
            },
        },
    }
</script>
